<nav class="navbar navbar-light">
    <div class="container">
        <a class="navbar-brand" routerLink="/features/blog">conduit</a>

        <!-- Show this for logged out users -->
        <ul *showAuthed="false" class="nav navbar-nav pull-xs-right">

            <li class="nav-item">
                <a class="nav-link" routerLink="/">
          Home
        </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" routerLink="/login" routerLinkActive="active">
          Sign in
        </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" routerLink="/register" routerLinkActive="active">
          Sign up
        </a>
            </li>

        </ul>

        <!-- Show this for logged in users -->
        <ul *showAuthed="true" class="nav navbar-nav pull-xs-right">

            <li class="nav-item">
                <a class="nav-link" routerLink="/features/blog" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
          Home
        </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" routerLink="/features/blog/editor" routerLinkActive="active">
          <i class="ion-compose"></i>&nbsp;New Article
        </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" routerLink="/settings" routerLinkActive="active">
          <i class="ion-gear-a"></i>&nbsp;Settings
        </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" [routerLink]="['/features/blog/profile', currentUserProfile.username]" routerLinkActive="active">
          <img [src]="currentUserProfile.image" *ngIf="currentUserProfile.image" class="user-pic" />
          {{ currentUserProfile.username }}
        </a>
            </li>

        </ul>

    </div>
</nav>
